<template>
  <el-dialog
      title="新增组件参数类型"
      v-el-drag-dialog
      v-if="showDom"
      :visible.sync="visible"
      width="800px"
      center
      @closed="closed">
    <el-form
        :model="form"
        :rules="rules"
        ref="form"
        size="small"
        label-width="120px">
      <el-row :gutter="15">
        <el-col :span="24">
          <el-form-item label="参数类型名称" prop="className">
            <el-input v-model="form.className" placeholder="请输入组件库名称"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="备注" prop="remarks">
            <el-input
                type="textarea"
                resize="none"
                v-model="form.remarks"
                show-word-limit
                :maxlength="200"
                :autosize="{ minRows: 2, maxRows:4 }"
                placeholder="请输入备注"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <div slot="footer" class="dialog-footer">
      <el-button size="small" type="" @click="hide">关 闭</el-button>
      <el-button size="small" type="primary" @click="confirmTap">添 加</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  props: {},
  data() {
    return {
      showDom: false,
      visible: false,
      innerVisible: false,
      form: {
        className: "",
        remarks: ""
      },
      rules: {
        className: [
          {required: true, message: "请输入参数类型名称", trigger: "blur"}
        ]
      }
    };
  },
  computed: {},
  mounted() {

  },
  created() {
  },
  methods: {
    show() {
      this.showDom = true
      this.visible = true
      this.$nextTick(() => {
        this.form = {
          className: "",
          remarks: ""
        };
        this.$refs.form.resetFields();
      })
    },
    hide() {
      this.visible = false
    },
    closed() {
      this.showDom = false
    },
    // 确定添加
    confirmTap() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.$api.addPClass(this.form).then(res => {
            this.$message.success(res.data.msg)
            this.$emit('success')
            this.hide()
          })
        } else {
          return false;
        }
      });
    }
  }
};
</script>
<style lang="less" scoped>
  .form-box-group {
    max-height: 500px;
    overflow: hidden;
    overflow-y: auto;
  }

  .form-box-item {
    padding: 15px 50px 15px 15px;
    border-bottom: solid 1px #ffffff;

    &:last-child {
      border-bottom: none;
    }
  }
</style>